<template>
    <div class="catShopList">
        <div class="shop" v-for="item in data" :key="item.shop_id">
            <div class="top">
                <div class="left">
                    <img :src="item.logo_thumb" alt="">
                    <div class="info">
                        <div class="title">{{ item.rz_shop_name }}</div>
                        <div class="focusCount">
                            已经有{{ item.collect_count }}人关注
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="goShop">
                        进店
                    </div>
                    <div class="focus">
                        <i class="iconfont">&#xe607;</i>
                        关注
                    </div>
                </div>
            </div>
            <div class="shopSwiper">
                <shopSwiper :data="item.goods"></shopSwiper>
            </div>
        </div>
    </div>
</template>

<script>
import ShopSwiper from './shopSwiper.vue';



export default {
    props: ["data"],
    components:{
        ShopSwiper
    },
}
</script>

<style scoped>
.catShopList {
    width: 96vw;
    margin: 2.6667vw auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.6667vw;

    .shop {
        width: 100%;
        background-color: #fff;
        border-radius: 2.6667vw;
    }
}

.top {
    display: flex;
    width: 100%;
    height: 17.8667vw;
    object-fit: cover;
    padding: 4vw 2.9333vw;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        width: 44.2667vw;
        justify-content: space-between;
        gap: 1.3333vw;

        img {
            width: 8.64vw;
            height: 8.64vw;
            border-radius: 50%;
            border: 1px solid #ccc;

        }

        .info {
            width: 37.3333vw;
            height: 9.8667vw;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                font-size: 4vw;
            }

            .focusCount {
                font-size: 3.2vw;
            }
        }
    }

    .right {
        width: 32vw;
        height: 6.6667vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 6.6667vw;
        font-size: 3.2vw;

        .goShop {
            width: 15.2vw;
            height: 6.6667vw;
            border-radius: 5.3333vw;
            background-color: red;
            color: #fff;
        }

        .focus {
            width: 15.2vw;
            height: 6.6667vw;
            border-radius: 5.3333vw;
            border: .2667vw solid red;
            box-sizing: border-box;
            color: red;
            i.iconfont{
                font-size: 3.2vw;
            }
        }
    }
}
.shopSwiper{
    width: 100%;
    padding: 0 2.6667vw 2.6667vw;
    box-sizing: border-box;
}



</style>